<template>
  <div>
    <el-dialog
      title="必填项校验"
      custom-class="dialogStyle"
      :visible.sync="showDialog"
      :before-close="handleClose"
    >
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        default-expand-all
        class="required-table"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table
              :data="props.row.waybill_list"
              style="width: 100%"
              v-if="props.row.waybill_list"
              :show-header="false"
              :header-cell-style="{ 'text-align': 'center' }"
            >
              <el-table-column
                align="right"
                prop="waybill_no"
                label="单号"
                width="198"
              >
              </el-table-column>
              <el-table-column
                prop="err_msg"
                label="缺失必填项"
                width="300"
                align="left"
              >
              </el-table-column>
              <el-table-column
                prop="is_ok"
                label="状态"
                width="100"
                align="center"
              >
                <template slot-scope="scope">
                  <div
                    @click="!scope.row.is_ok && handleEditWaybill(props, scope)"
                    :class="{ circle: true, error: !scope.row.is_ok }"
                  >
                    {{ scope.row.is_ok ? "已完成" : "待完善" }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          prop="collect_no"
          label="单号"
          width="150"
          align="right"
        >
        </el-table-column>
        <el-table-column
          prop="err_msg"
          label="缺失必填项"
          width="300"
          align="left"
        >
        </el-table-column>
        <el-table-column prop="is_ok" label="状态" width="100" align="center">
          <template slot-scope="scope">
            <div
              @click="!scope.row.is_ok && handleEditDelivery(scope)"
              :class="{ circle: true, error: !scope.row.is_ok }"
            >
              {{ scope.row.is_ok ? "已完成" : "待完善" }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleOk">确 定</el-button>
      </span>
    </el-dialog>
    <el-drawer
      title="我是外面的 Drawer"
      :visible.sync="waybillDialogShow"
      size="86%"
    >
      <Allwaybill
        v-if="waybillDialogShow"
        @close="WaybillClose"
        :id="currentWaybillId"
        wayType="modify"
      ></Allwaybill>
    </el-drawer>
    <StepOperation
      :showDialog="deliveryDialogShow"
      step="1"
      @close="handleCloseDeliveryDialog"
      :id="currentDeliveryId * 1"
      :ids="ids.map(Number)"
      mode="edit"
      @closeDialog="handleCloseDeliveryDialog"
    >
    </StepOperation>
  </div>
</template>

<script>
import Allwaybill from "@/components/waybillPop/Allwaybill.vue";
import StepOperation from "./stepOperation.vue";
import { deliveryDetailFn, CollectFinishCheck } from "@/api/waybill";
export default {
  name: "checkInfo",
  components: { Allwaybill, StepOperation },
  props: ["showDialog", "err_list"],
  data() {
    return {
      waybillDialogShow: false,
      deliveryDialogShow: false,
      currentWaybillId: "",
      currentDeliveryId: "",
      tableData: [],
      ids: [],
      deliveryIndex: "",
      waybillIndex: "",
      type: "",
    };
  },
  mounted() {},
  watch: {
    err_list(newValue, oldValue) {
      this.tableData = newValue;
    },
  },
  methods: {
    // 关闭运单编辑
    WaybillClose() {
      this.waybillDialogShow = false;
      this.updateTableData();
    },
    // 关闭揽收单编辑
    handleCloseDeliveryDialog() {
      this.deliveryDialogShow = false;
      this.updateTableData();
    },
    handleClose() {
      this.$emit("close");
    },
    handleOk() {
      const isValid = this.validateData(this.tableData);
      if (!isValid) {
        this.$message({
          message: "请先填写缺失必填项",
          type: "warning",
        });
      } else {
        this.$emit("ok");
      }
    },

    updateTableData() {
      CollectFinishCheck({
        collect_id: this.currentDeliveryId + "", //揽收id，必传
        waybill_id: this.currentWaybillId + "", //运单id，非必传
      }).then((res) => {
        const message = res.data.message;
        let currentInfo = {};
        // 修改揽收单
        if (this.type === "1") {
          currentInfo = this.tableData[this.deliveryIndex];
        } else if (this.type === "2") {
          currentInfo =
            this.tableData[this.deliveryIndex].waybill_list[this.waybillIndex];
        }
        this.$set(currentInfo, "err_msg", message);
        this.$set(currentInfo, "is_ok", !message);
      });
    },
    handleEditWaybill(props, scope) {
      const deliveryId = props.row.collect_id;
      // 当前的运单id
      const waybillId = scope.row.waybill_id;
      this.deliveryIndex = props.$index;
      this.waybillIndex = scope.$index;
      this.currentDeliveryId = deliveryId;
      this.currentWaybillId = waybillId;
      this.type = "2";
      this.waybillDialogShow = true;
      // console.log(this.deliveryIndex, this.waybillIndex, ' this.deliveryIndex waybillIndex------');
      // console.log(this.currentDeliveryId, this.currentWaybillId, ' this.deliveryIndex waybillIndex------');
    },
    async handleEditDelivery(scope) {
      // 当前编辑的揽收单id
      const deliveryId = scope.row.collect_id;
      this.deliveryIndex = scope.$index;
      this.type = "1";
      const res = await deliveryDetailFn({ id: deliveryId * 1 });
      const waybill_data_list = res.data.waybill_data_list;
      this.ids = waybill_data_list.map((item) => item.waybill_id);
      // console.log(this.deliveryIndex, ' this.deliveryIndex ------');
      this.currentDeliveryId = deliveryId;
      this.currentWaybillId = "";
      this.deliveryDialogShow = true;
    },
    validateData(data) {
      let isValid = true;
      // Iterate through each object in the array and check the value of "is_ok"
      for (let i = 0; i < data.length; i++) {
        if (data[i]["is_ok"] === false) {
          isValid = false;
        }
        const waybill_list = data[i]["waybill_list"] || [];
        // Iterate through each object in the "waybill_list" array and check the value of "is_ok"
        for (let j = 0; j < waybill_list.length; j++) {
          if (waybill_list[j]["is_ok"] === false) {
            isValid = false;
          }
        }
      }
      return isValid;
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
}

/deep/.dialogStyle {
  width: 640px !important;
}

/deep/.required-table {
  border: 1px solid #ebeef5;
  border-bottom: none;
}

/deep/.required-table .el-table__cell.el-table__expanded-cell {
  padding: 0;
  // border-bottom: 0px solid white;
  border-bottom: none;
}

/deep/ .el-table td.el-table__cell .circle {
  &::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: rgba(83, 197, 27, 1);
    margin-right: 6px;
    border-radius: 50%;
  }

  &.error {
    color: #0f40f5;
    cursor: pointer;

    &::before {
      background-color: rgba(245, 36, 47, 1);
    }
  }
}
</style>
